<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jquery defer</title>
    <script type="text/javascript" src="../vendor/jquery-1.11.1.min.js"></script>
    <script>
        $(function(){
            var title="Hello world:";
            $.getJSON("./public/data.json").then(getSuccess);

            $(".rect").slideUp("slow").promise().done(function(){
                $("p").html("done");
            });

            function getSuccess(r){
                $("p").html("Success");
            }
        });

        function defer(){
            var deferred= $.Deferred();
            var promise=deferred.promise();

            function alert1(){alert(1);}
            function alert2(){alert(2);}

            promise.done(alert1,[alert1,alert2],alert2);

            deferred.resolve();
        }
    </script>
    <style>
        .rect{
            display: inline-block;
            width: 200px;
            height: 200px;
        }
        .red{
            background-color: #f00;
        }
        .blue{
            background-color: #00f;
        }
        .yellow{
            background-color: #ff0;
        }
    </style>
</head>
<body>
<p></p>
    <div>
        <div class="rect red"></div>
        <div class="rect blue"></div>
        <div class="rect yellow"></div>
    </div>
</body>
</html>